$em_size = 20px
$em_size_small = 14px
$em_size_large = 36px

// OUTER DIV
div.renderer-wrapper
	font-smoothing antialiased
	width 100%
	margin 0
	padding 0

// SVG-WIDE
svg
	&.renderer-svg
		fill $color-bg
		text-rendering optimizeLegibility
		box-sizing border-box
		tspan
			height 1em
			line-height 1em
	.svg-background
		fill $color-bg

// EM SIZE USED TO CONVERT JSON CONFIG TO
// PROPORTIONAL SIZES BASED ON VIEWPORT
.em-size-wrapper
	width 100%
.em-size
	font-size $em_size
	position absolute
	visibility hidden
	top 0
	line-height 1em
	margin 0 0 0 -1000px
	padding 0
	width 1em
	height 1em

.small .em-size
	font-size $em_size_small

// SVG TEXT
.svg-text
	font-size $em_size

	tspan
		&.em
			font-style italic

		&.strong
			font-family $font-sans-bold

		&.strong .em, &.em .strong
			font-family $font-sans-bold
			font-style italic

	&.svg-text-credit
		fill $color-chart-meta
		text-anchor start
	&.svg-text-source
		fill $color-chart-meta
		&.left
			text-anchor start
		&.right
			text-anchor end
	&.svg-text-title
		fill $color-body-text

.medium .svg-text
	font-size $em_size
	&.svg-text-credit
		font-size $em_size*0.6
	&.svg-text-source
		font-size $em_size*0.6
	&.svg-text-title
		font-size $em_size

.small .svg-text
		font-size $em_size_small
		&.svg-text-credit
			font-size $em_size*0.5
		&.svg-text-source
			font-size $em_size*0.5
		&.svg-text-pipe
			text
				dominant-baseline central
				font-size $em_size*0.6
		&.svg-text-title
			font-size $em_size_small

// LABEL TEXT
.svg-label-text
	&.draggable
		cursor move

.small .svg-label-text
	font-size $em_size_small

// THIS IS RENDERED FOR MEASUREMENTS BUT NOT SHOWN
.hidden-svg
	visibility hidden

// LINE SERIES
.series-line-path
	fill none
	stroke-linecap round
	stroke-linejoin round

.large .series-line-path
	stroke-width 4px

.medium .series-line-path
	stroke-width 3px

.small .series-line-path
	stroke-width 2px

// AXIS
.axis
	text.tick
		fill $color-chart-axis-text
		shape-rendering crispEdges
		&[data-anchor="middle"]
			text
				text-anchor middle
		&.orient-left
			text-anchor start
		&.orient-right
			text-anchor end
		&.hidden-svg
			visibility hidden

// GRID LINES
.grid-lines
	line.tick
		stroke $color-chart-gridline
		stroke-width 1px
		shape-rendering crispEdges
	line.zero
		stroke $color-chart-zeroline
		shape-rendering crispEdges

.concealer-label
	text
		fill $color-chart-axis-text
	rect
		fill $color-bg

// CHART GRID
.blocker-rect
	fill $color-bg

.series-label
	font-size $em_size

.small .series-label
	font-size $em_size_small

// MISC ELEMENTS
.svg-source-pipe
	stroke $color-chart-meta
	fill none
	stroke-width 0.8px

.crosshair
	line
		stroke-width 1
		shape-rendering crispEdges
		stroke black

.cb-credit-logo
	fill $color-chart-meta
